<template>
	<view>
		
		<!-- 轮播图 -->
		<swiper class="swiper-area" :indicator-dots="true" indicator-color="rgba(0,0,0,.1)" indicator-active-color="red" :autoplay="true" circular="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(image, index) in bannerImages" :key="index">
				<image class="swiper-image" :src="image" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		
		<view class="uni-title">推荐歌单</view>
		
		<!-- 推荐歌单列表区域 -->
		<view class="uni-product-list">
			<view class="uni-product" @click="toPlayList(list)" v-for="(list, index) in recommendSongs" :key="index">
				<view class="image-view">
					<image v-if="renderImage" class="uni-product-image" :src="list.picUrl + '?param=320y320'"></image>
				</view>
				<view class="uni-product-title">{{list.name}}</view>
			</view>
		</view>
		
		<!-- 左侧抽屉菜单 -->
		<uni-drawer @close="closeDrawer" :visible="showDrawer" mode="left">
			<uni-list>
				<uni-list-item @click="toHistory" title="播放历史" note=""></uni-list-item>
				<uni-list-item @click="toDownload" title="下载管理" note=""></uni-list-item>
			</uni-list>
		</uni-drawer>
		
		<!-- 播放栏 -->
		<view class="play-area">
			<play-bar></play-bar>
		</view>
		
	</view>
</template>

<script>
	// uni列表
	import uniList from "@/components/uni-list/uni-list.vue";
	// uni列表项
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
	// uni抽屉
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
	// 播放栏
	import playBar from "@/components/custom/play-bar.vue";

	const _URL = 'https://api.wulv5.com/music';
	
	export default {
		components: {
			uniList,
			uniListItem,
			uniDrawer,
			playBar
		},
		data() {
			return {
				// 轮播图图片组, 存储的图片链接
				bannerImages: [],
				// 推荐歌单组
				recommendSongs: [],
				// 是否渲染推荐歌单的图片
				renderImage: true,
				// 默认是否显示抽屉菜单
				showDrawer: false
			}
		},
		onLoad() {
			// 请求首页banner图资源
			uni.request({
				url: `${_URL}/banner`,
				method: 'GET',
				success: res => {
					//console.log(res);
					// 存储所有图片链接到bannerImages数组
					for(let i = 0, bannerLen = res.data.banners.length; i < bannerLen; i++) {
						this.bannerImages.push(`${res.data.banners[i].imageUrl}?param=700y260`);
					}
				},
				fail: () => {
					console.log("请求资源失败 - 请求轮播图图片错误!")
				}
			});
			// 请求首页推荐歌单资源
			uni.request({
				url: `${_URL}/personalized`,
				method: 'GET',
				success: res => {
					//console.log(res);
					// 将返回结果存入recommendSongs数组, 数组整体替换
					this.recommendSongs = res.data.result;
				},
				fail: () => {
					console.log("请求资源失败 - 请求推荐歌单错误!")
				}
			});
		},
		// 导航栏按钮tab处理
		onNavigationBarButtonTap(e) {
			//console.log(e);
			// 如果点击的是第二个按钮, toSearch(), 第一个按钮, openDrawer
			if(e.index == 1) {
				this.toSearch();
			} else if (e.index == 0) {
				this.openDrawer();
			}
		},
		methods: {
			// 跳转到搜索页
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				});
			},
			toHistory() {
				uni.navigateTo({
					url: "/pages/history/history"
				})
			},
			toDownload() {
				uni.navigateTo({
					url: "/pages/download/download"
				})
			},
			toPlayList(list) {
				// console.log(list)
				uni.navigateTo({
					url: `/pages/list/list?id=${list.id}`
				})
			},
			openDrawer() {
				this.showDrawer = true;
			},
			// 元素绑定事件@close
			closeDrawer() {
				this.showDrawer = false;
			}
		}
	}
</script>

<style>
	/* 轮播图 */
	.swiper-area {
		width: 700upx;
		height: 260upx;
		margin: 0 auto;
		padding-top: 20upx;
	}
	
	/* 轮播图图片 */
	.swiper-image {
		width: 700upx;
		height: 260upx;
		border-radius: 10upx;
	}
	
	/* 播放栏 */
	.play-area {
		position: fixed;
		bottom: 0;
	}

	/* uni样式覆盖 */
	.uni-product-list {
		width: 700upx;
		margin: 0 auto;
		padding-bottom: 100upx;
		justify-content: space-between;
		align-items: start;
	}
	.image-view, .uni-product-image {
		width: 200upx;
		height: 200upx;
	}
	.uni-product-title {
		width: 200upx;
		font-size: 20upx;
	}
	.uni-product {
		padding: 10upx;
	}
</style>
